<template>
  <div :id="idName" :style="{ width: width, height: height }" />
</template>

<script>
export default {
  props: {
    idName: {
      type: String,
      default: 'chart-pile'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    // 释放图表实例
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.idName));
      this.chart.setOption(this.getOptions());
    },
    changeNumberToStr(data) {
      data = data || '-'
      const strArr = data.toString().split('.');
      const letterArr = (strArr[0] || 0).split('');
      const result = [];
      let counter = 0;
      for (let i = letterArr.length - 1; i >= 0; i--) {
        counter++;
        result.unshift(letterArr[i]);
        if (!(counter % 3) && i !== 0) {
          result.unshift(',');
        }
      }
      if (strArr.length > 1) {
        return result.join('') + '.' + strArr[1];
      } else {
        return result.join('')
      }
    },
    getOptions() {
      // 总数据列表
      const totalData = []
      for (var i = 1; i < 8; i++) {
        const obj = {
          name: '数据' + i,
          dataList: []
        }
        for (var j = 1; j < 5; j++) {
          const obj1 = {
            label: 'x' + j,
            value: 500 * j
          }
          obj.dataList.push(obj1)
        }
        totalData.push(obj)
      }
      const series = [];
      const yNameData = totalData[0]?.dataList.map(
        (x) => x.label
      );
      // 女
      totalData.forEach((item, index) => {
        series.push({
          name: item.name,
          type: 'bar',
          stack: 'right',
          barWidth: 9,
          data: item.dataList.map((x) => x.value)
        });
      })
      // 男
      totalData.forEach((item, index) => {
        series.push({
          name: item.name,
          type: 'bar',
          stack: 'right',
          barWidth: 9,
          data: item.dataList.map((x) => `-${x.value}`)
        });
      })

      const option = {
        // 你的代码
        backgroundColor: 'transparent',
        grid: {
          left: '10%',
          right: '4%',
          top: 10,
          bottom: '13%',
          containLabel: true
        },
        tooltip: {},
        xAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: '#fff'
              }
            }
          }
        ],
        yAxis: {
          type: 'category',
          data: yNameData,
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#C1CBE5'
            }
          },
          axisLabel: {
            show: false,
            textStyle: {
              fontSize: 14,
              color: '#727781'
            }
          }
        },
        series
      };
      return option;
    }
  }
};
</script>
